<?php
use frontend\modules\yii2\widgets\layouts\markdown\Markdown;
use frontend\modules\yii2\widgets\layouts\example\Example;
use yii\bootstrap\Modal;
use yii\bootstrap\Button;

$this->title = 'Dropdown Widget Yii-Bootstrap下拉列表使用教程和样式展示';
$this->registerMetaTag([
    'name' => 'keywords',
    'content' => 'dropdown,Yii,bootstrap3,widget,下拉列表,使用教程,演示'
]);
$this->registerMetaTag([
    'name' => 'description',
    'content' => 'Yii的bootstrap系列小部件中下拉列表小部件dropdown的使用教程及演示'
]);
$this->registerMetaTag([
    'name' => 'author',
    'content' => 'chenzhiwei'
]);


$html = [
    "markdown0" => <<<M0
# Model对话框小部件的使用
> Bootstrap官网文档：[模态框](https://v3.bootcss.com/javascript/#modals)

对话框是我们在进行html设计时经常使用到的组件，先来看一下这个小部件的使用方法：
M0,
    "example0" => [
        "html" =>
            \lvzmen\yii\cms\widgets\modal\MyModal::widget([
                'header' => 'Hello world',
                'headerOptions' => ['style' => 'font-weight: 600; font-size: 20px'],
                'toggleButton' => ['label' => 'click me', 'class' => 'btn btn-success'],
                'body' => 'Say hello...',
                'footer' => Button::widget([
                    "label" => "Confirm",
                    "options" => [
                        "class" => "btn btn-primary"
                    ]
                ]) .
                Button::widget([
                    "label" => "Cancel",
                    "options" => [
                        'data-dismiss' => "modal",
                        "class" => "btn btn-default"
                    ]
                ])
            ])
        ,
        "yii" => <<<EY0
use yii\bootstrap\Modal;
Modal::begin([
    'header' => 'Hello world',
    'headerOptions' => [
        'style' => 'font-weight: 600; font-size: 20px'
    ],
    'toggleButton' => [
        'label' => 'click me', 
        'class' => 'btn btn-success'
    ],
    'footer' => Button::widget([
        "label" => "Confirm",
        "options" => [
            "class" => "btn btn-primary"
        ]
    ]) .
    Button::widget([
        "label" => "Cancel",
        "options" => [
            'data-dismiss' => "modal",
            "class" => "btn btn-default"
        ]
    ])
]);
echo 'Say hello...';
Modal::end();
EY0,
        "bootstrap" => <<<EB0
<div id="modal_6144270a3a8da" class="fade modal" role="dialog" tabindex="-1">
    <div class="modal-dialog ">
        <div class="modal-content">
            <div class="modal-header" style="font-weight: 600; font-size: 20px">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                Hello world
            </div>
            <div class="modal-body">
                Say hello...
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary">Confirm</button>
                <button class="btn btn-default" data-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>
</div>
EB0
    ],
    "markdown1" => <<<M0
> 注意：在`Modal::begin()`和`Modal::end()`之间的内容是对话框的主体内容，即：`echo 'Say hello...';`的输出会放在对话框中。  

## 非堆栈实现
上述的例子是官方利用堆栈实现的对话框，这种分段式的方式有时候并不利于我们的使用，因此我们可以修改一下，以`Modal::widget()`的方式直接输出对话框，示例如下：
M0
    ,

    "example1" => [
        "html" =>
            \lvzmen\yii\cms\widgets\modal\MyModal::widget([
                'header' => 'Hello world',
                'headerOptions' => [
                    'style' => [
                        'font-weight' => 600,
                        'font-size' => '20px'
                    ]
                ],
                'toggleButton' => [
                    'label' => '非堆栈对话框',
                    'class' => 'btn btn-success'
                ],
                'body' => '我就不用堆栈，你来打我啊',
                'footer' => Button::widget([
                        "label" => "Confirm",
                        "options" => [
                            "class" => "btn btn-primary"
                        ]
                    ]) .
                    Button::widget([
                        "label" => "Cancel",
                        "options" => [
                            'data-dismiss' => "modal",
                            "class" => "btn btn-default"
                        ]
                    ])
            ]) .
            \lvzmen\yii\cms\widgets\modal\MyModal::widget([
                'header' => 'Hello world',
                'headerOptions' => [
                    'style' => [
                        'font-weight' => 600,
                        'font-size' => '20px'
                    ]
                ],
                'size' => Modal::SIZE_SMALL,
                'toggleButton' => [
                    'label' => '小对话框',
                    'class' => 'btn btn-success'
                ],
                'body' => '我就不用堆栈，你来打我啊',
                'footer' => Button::widget([
                        "label" => "Confirm",
                        "options" => [
                            "class" => "btn btn-primary"
                        ]
                    ]) .
                    Button::widget([
                        "label" => "Cancel",
                        "options" => [
                            'data-dismiss' => "modal",
                            "class" => "btn btn-default"
                        ]
                    ])
            ]) .
            \lvzmen\yii\cms\widgets\modal\MyModal::widget([
                'header' => 'Hello world',
                'headerOptions' => [
                    'style' => [
                        'font-weight' => 600,
                        'font-size' => '20px'
                    ]
                ],
                'size' => Modal::SIZE_LARGE,
                'toggleButton' => [
                    'label' => '大对话框',
                    'class' => 'btn btn-success'
                ],
                'body' => '我就不用堆栈，你来打我啊',
                'footer' => Button::widget([
                        "label" => "Confirm",
                        "options" => [
                            "class" => "btn btn-primary"
                        ]
                    ]) .
                    Button::widget([
                        "label" => "Cancel",
                        "options" => [
                            'data-dismiss' => "modal",
                            "class" => "btn btn-default"
                        ]
                    ])
            ])
        ,
        "yii" => <<<EY1
use lvzmen\yii\cms\widgets\modal\MyModal;
MyModal::widget([
    'header' => 'Hello world',
    'headerOptions' => [
        'style' => [
            'font-weight' => 600,
            'font-size' => '20px'
        ]
    ],
    //这里控制对话框的尺寸SIZE_LARGE，SIZE_SMALL
    //'size' => Modal::SIZE_LARGE, 
    'toggleButton' => [
        'label' => '非堆栈对话框',
        'class' => 'btn btn-success'
    ],
    'body' => '我就不用堆栈，你来打我啊',
    'footer' => Button::widget([
            "label" => "Confirm",
            "options" => [
                "class" => "btn btn-primary"
            ]
        ]) .
        Button::widget([
            "label" => "Cancel",
            "options" => [
                'data-dismiss' => "modal",
                "class" => "btn btn-default"
            ]
        ])
])
EY1,
        "bootstrap" => <<<EB1
<div id="modal_6144270a3a8da" class="fade modal" role="dialog" tabindex="-1">
    <div class="modal-dialog ">
        <div class="modal-content">
            <div class="modal-header" style="font-weight: 600; font-size: 20px">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                Hello world
            </div>
            <div class="modal-body">
                我就不用堆栈，你来打我啊
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary">Confirm</button>
                <button class="btn btn-default" data-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>
</div>
EB1

    ],
    "markdown2" => <<<EM2
下面是用非堆栈的方式实现的小部件代码：
```php
<?php

namespace lvzmen\yii\cms\widgets\modal;

use Yii;
use yii\bootstrap\Html;
use yii\bootstrap\Modal;

class MyModal extends Modal
{
    public \$body = "";

    /**
     * Initializes the widget.
     */
    public function init()
    {
        if(is_null(\$this->getId(false))) {
            \$this->setId("modal_" . uniqid());
        }
        \$this->options["id"] = \$this->options["id"] ?? \$this->getId();
        \$this->initOptions();
    }

    /**
     * Renders the widget.
     */
    public function run()
    {
        \$this->registerPlugin('modal');

        \$result = "";
        \$result .= \$this->renderToggleButton() . "\\n";
        \$result .= Html::beginTag('div', \$this->options) . "\\n";
        \$result .= Html::beginTag('div', ['class' => 'modal-dialog ' . \$this->size]) . "\\n";
        \$result .= Html::beginTag('div', ['class' => 'modal-content']) . "\\n";
        \$result .= \$this->renderHeader() . "\\n";
        \$result .= \$this->renderBodyBegin() . "\\n";
        \$result .= \$this->body . "\\n";
        \$result .= "\\n" . \$this->renderBodyEnd();
        \$result .= "\\n" . \$this->renderFooter();
        \$result .= "\\n" . Html::endTag('div'); // modal-content
        \$result .= "\\n" . Html::endTag('div'); // modal-dialog
        \$result .= "\\n" . Html::endTag('div');

        return \$result;
    }
}

```
EM2
    ,
    "markdown3" => <<<M3
## 常用事件
```js
$('#myModal').on('show.bs.modal', function (e) {
  // show 方法调用之后立即触发该事件
});
$('#myModal').on('shown.bs.modal', function (e) {
  // 此事件在模态框已经显示出来（并且同时在 CSS 过渡效果完成）之后被触发
});
$('#myModal').on('hide.bs.modal', function (e) {
  // hide 方法调用之后立即触发该事件
});
$('#myModal').on('hidden.bs.modal', function (e) {
  // 此事件在模态框被隐藏（并且同时在 CSS 过渡效果完成）之后被触发
});
$('#myModal').on('loaded.bs.modal', function (e) {
  // 从远端的数据源加载完数据之后触发该事件
});
```

## Widget Api
### 父类及继承关系
![button group](/upload/articles/images/20210917140325.png)
### 属性
- `header`: string  
标题，可以是字符串也可以是`html`代码，标签不会被转换。
- `headerOptions`: array  
用来给标题所在的标签添加相关的属性，比如说：class, style等。
- `bodyOptions`: array  
用来给对话框`body`所在的标签添加相关的属性，比如说：class, style等。
- `footer`: string  
和`header`相对应，一般在对话框底部添加按钮之类的控件；
- `footerOptions`: array  
用来给`footer`所在的标签添加相关的属性，比如说：class, style等。
- `size`: string  
用于设置对话框的大小，有三个选项：empty/SIZE_LARGE/SIZE_SMALL。
- `closeButton`: array/false  
如果是`false`的话，隐藏右上角的关闭按钮，否则的话需要传入一个数组，用于定制关闭按钮，如：
```php
['tag' => 'button', 'label' => 'X']
```
- `toggleButton`: array/false  
打开对话框的按钮，如果你创建了一个对话框，那一定是需要打开对话框，因此作者设置了这个属性，在你创建对话框的时候可以连同打开对话框的按钮一起创建，如果不需要的话可以传入`false`，否则的话需要传入一个数组，这个数组的内容和`button`小部件基本一致，如：
```php
['label' => '非堆栈对话框', 'class' => 'btn btn-success']
```
M3
];

foreach($html as $name => $item){
    switch ($name) {
        case strpos($name, "example") !== false:
            echo Example::widget($item);
            break;
        case strpos($name, "markdown") !== false:
            echo Markdown::widget(["content" => $item]);
            break;
        default:
            break;
    }
}